<template>
<div class="">
  <div class="univ_list">
      <div class="header" style="display: flex">
        <div class="title ocolor" >院校库</div>
        <div class="more" @click="more_university">更多 ></div>
      </div>
      <div style="margin-left:.5rem">
<swiper class="swiper" :options="swiperOption">
            <swiper-slide  v-for="(slide,index1) in universityInfoList" :key="index1">
                <div class="items" :style="{backgroundImage: 'url('+ getImgUrl(slide.thumb) +')'}">
                    <div class="area">
                        <div class="area_CN">{{slide.cate_name}}</div>
                        <!--                <div class="area_EN">Hongkong</div>-->
                    </div>
                    <div class="line"></div>
                    <div class="item_list"  v-for="(item,index2) in slide.children" :key="index2">
                        <ul class="list">
                            <li>{{index2+1}}.{{item.cate_name}}</li>
                        </ul>
                    </div>
                </div>
            </swiper-slide>
    </swiper>
      </div>
    
  </div>
</div>
</template>

<script>
 import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
  import 'swiper/swiper-bundle.css'
export default {
  name: 'UniversityInfo',
    props:{
        universityInfoList:Array
    },
  components: {
      Swiper,
      SwiperSlide
    },
  data() {
      return {
        swiperOption: {
          slidesPerView: 2,
          spaceBetween: 30,
          freeMode: true,
        },
      }
    },
    methods:{
        more_university(){
            this.$router.push({path:'/moreUniversity'})
        },
       
    }
}
</script>

<style lang="less">
.container{
   .title{
       flex: 1;
        color: rgb(0, 164, 255);
        font-size: 0.9rem;
        line-height: 0.9rem;
        font-weight: bold;
        text-align: center;
    }
  .header{
      padding: 1.3rem 1rem 1.3rem 0;
      display: flex;
    .more{
        color: rgb(42, 65, 84);
        font-size: 0.7rem;
        line-height: 0.7rem;
    }
  }
    .items{
        color: #fff;
        width: 8.2rem;
        margin-right: 0.623rem;
        height: 6.5rem;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        border-radius: 0.35rem;
        padding-top: 0.8rem;
        padding-left: 1.6rem;
        padding-right: 0.6rem;
        .area{
            .area_CN{
                font-size: 0.8rem;
            }
            .area_EN{
                font-size: 0.5rem;
            }
        }
        .line{
            height: 1px;
            margin-top: 0.2rem;
            margin-bottom: 0.35rem;
            background: rgba(255, 255, 255, 0.5);
        }
        .item_list{
            // padding-left: 0.5rem;
            line-height: 1.2rem;
            ul{
                /*list-style:decimal !important;*/
            }
            li{
                padding-bottom: 0.2rem;
                font-size: 0.6rem;

            }
        }
    }
}
</style>
